<template>
  <div>
    <div style="height: 70px;width: 100%;background: #aeb3c5;text-align: center">
      <span style="color: white;line-height: 70px;font-size: 25px">角色管理</span>
    </div>
    <!--表格-->
    <div>
      <el-table :data="cutBean.records" style="width: 100%">
        <el-table-column prop="name" label="角色名称"/>
        <el-table-column fixed="right" label="操作" width="520">
          <template #default="scope">
            <el-button type="danger" @click="del(scope.row)">删除角色</el-button>
            <el-button type="primary" @click="showGrade(scope.row)">查看角色权限</el-button>
            <el-button type="success" @click="showUpdate(scope.row)">修改信息</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>


    <div>
      <div style="display: flex;justify-content: space-around;margin-top:50px">
        <el-pagination
            v-model:currentPage="cutBean.current"
            v-model:page-size="cutBean.size"
            background
            layout="prev, pager, next, jumper"
            :total="cutBean.total"
            @current-change="findByItem"
        />
        <div>
          <el-button type="primary" @click="showAdd()">添加新角色</el-button>
        </div>
      </div>
      <!--查看权限弹出框-->
      <el-dialog
          v-model="gradeVisible"
          title="查看权限信息"
          width="30%"
      >
        角色名称：{{findRoleObj.name}}<br>
        <el-form-item label="拥有权限：">
          <span v-for="per in findRoleObj.gradeBeans" :key="per.id" style="margin-left: 10px">{{ per.name }}</span>
        </el-form-item>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="gradeVisible = false">取消</el-button>
      </span>
        </template>
      </el-dialog>

      <!--      修改权限弹出框-->
      <el-dialog
          v-model="updateVisible"
          title="修改角色权限"
          width="30%"
      >
        角色名称：{{roleObj.name}}<br>
        <el-form-item label="拥有权限：">
          <el-checkbox v-for="grade in updateObj" v-model="roleGrade"  :label="grade.id">{{grade.name}}</el-checkbox>
        </el-form-item>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateVisible = false">取消</el-button>
        <el-button type="primary" @click="update()">修改</el-button>
      </span>
        </template>
      </el-dialog>

      <el-dialog
          v-model="addVisible"
          title="添加角色"
          width="50%"
      >
        角色名称：<input type="text" v-model="roleName"><br>
        拥有权限：<br>
        <el-form-item label="拥有权限：">
          <el-checkbox v-for="grade in addObj" v-model="addRoleGrade"  :label="grade.id">{{grade.name}}</el-checkbox>
        </el-form-item>

        <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="addRole()">添加</el-button>
      </span>
        </template>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      cutBean:{},
      findObj:{},
      gradeArray:[],
      findRoleObj:{},
      gradeVisible:false,
      updateVisible:false,
      roleObj:{},
      roleGrade:[],
      updateObj:{},
      addVisible:false,
      roleName:"",
      addObj:{},
      addRoleGrade:[],
    }
  },
  methods:{
    findByItem(pageNO){
      this.findObj.pageNO=pageNO;
      axios.get("/project/role/findByItem",{
        params:this.findObj
      }).then(resp=>{
        this.cutBean=resp.data;
      })
    },
    del(obj){
      axios.get("/project/role/del",{
        params:{
          roleId:obj.id
        }
      }).then(resp =>{
        if (resp.data = 'ok'){
          alert("删除成功")
          this.findByItem(1);
        }
      });
    },
    showGrade(obj){
      this.gradeVisible=true
      axios.get("/project/role/findById",{
        params:{
          roleId:obj.id
        }
      }).then(resp =>{
        this.findRoleObj = resp.data;
        var arr = new Array();
        for (var grade of this.findRoleObj.gradeBeans){
          arr.push(grade.name);
        }
        this.gradeArray = arr;
        this.gradeArray = true;
      });
    },
    showUpdate(obj){
      this.updateVisible=true;
      this.roleObj=obj;
      var list = new Array();
      list.push(obj);
      axios.get("/project/role/findById",{
        params:{
          roleId:obj.id
        }
      }).then(resp =>{
        this.roleGrade=[];
        var info = resp.data;
        info.gradeBeans.forEach(n =>{
          this.roleGrade.push(n.id);
        })
      });
      axios.get("/project/grade/findAll").then(resp =>{
        this.updateObj = resp.data;
      });
    },
    update(){
      axios.get("/project/role/update",{
        params:{
          roleId:this.roleObj.id,
          gradeIdArray:this.roleGrade.toLocaleString()
        }}).then(resp =>{
        if (resp.data == 'ok'){
          alert("修改成功")
          this.findByItem(1);
        }
        this.updateVisible=false;
      });
    },
    showAdd(){
      this.addVisible=true;
      axios.get("/project/grade/findAll").then(resp =>{
        this.addObj = resp.data;
      });
    },
    addRole(){
      axios.get("/project/role/add",{
        params: {
          name:this.roleName,
          gradeIdArray:this.addRoleGrade.toLocaleString()
        }}).then(resp =>{
        if (resp.data = 'ok'){
          this.findByItem(1);
          this.addVisible=false;
        }
      });
    }

  },
  created() {
    this.findByItem(1)
  }
}
</script>

<style scoped>

</style>